<template>
  <div class="container">
    <xy-table :list="list" :columns="columns">
      <template #addItem>
        <!-- <upload-file
          v-model="uploadForm.FilePath"
          :name="uploadForm.FileName"
          :on-success="onSuccess"
          :show-file-list="false"
        ></upload-file> -->
        <el-button icon="el-icon-upload2" @click="uploadFile" size="mini">
          上传
        </el-button>
        <span></span>
      </template>
      <template slot="operation">
        <el-table-column align="center" :label="$language.local('操作')" fit>
          <template slot-scope="scope">
            <el-row class="center">
              <el-col :span="8" class="center">
                <slot :scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="$language.local('下载')"
                    placement="top"
                    :enterable="false"
                  >
                    <el-button
                      type="success"
                      size="mini"
                      circle
                      icon="el-icon-download"
                      @click="downloadFile(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </slot>
              </el-col>

              <el-col :span="8" class="center">
                <delete-row
                  api="/api/Merchantcontract/Delete/"
                  :row="scope.row"
                ></delete-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <el-dialog
      :title="$language.local('上传文件')"
      :visible.sync="uploadDialogVisible"
      width="30%"
      class="drag-upload"
    >
      <el-form :model="uploadForm" ref="uploadFormRef" :rules="$rules">
        <el-form-item prop="FilePath">
          <upload-file
            v-model="uploadForm.FilePath"
            :drag="true"
            :on-success="onSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击选择</em>
            </div>
            <div class="el-upload__tip" slot="tip">上传文件不超过 5 MB</div>
          </upload-file>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit('uploadFormRef')">{{
          $language.local("确定")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      columns: {
        AgreementNumber: "YJS000013001",
        FileName: "湖南新越规划建筑设计有限公司-YJS000013-1616768623",
        CreateDate: "2021-03-26T22:23:50",

        UpUserName: "yjs",
        Status: "",
      },
      id: "",
      list: [],
      uploadForm: {
        FileName: "",
        FilePath: "",
      },
      merchant: null,
      uploadDialogVisible: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let { id } = this.$route.query;
      if (!id) {
        return;
      }
      console.log(id);
      this.uploadForm.id = id;
      let response = await this.$http.get(
        `/api/Merchantcontract/GetList/${id}`
      );
      console.log(response);
      this.merchant = response.data.Data;
      this.list = response.data.Data.contract;
    },

    downloadFile(row) {
      console.log(row);

      let url = process.env.VUE_APP_BASEURL + row.FilePathUrl;
      console.log(url);
      // window.location.href = url;
      // window.open(url, "_blank");
      // const a = document.createElement("a");
      // a.href = url;
      // a.download = "123.doc";
      // a.target = "_blank";
      // // $("body").append(a); // 修复firefox中无法触发click
      // a.click();
      // a.remove();
      this.$common.downloadFile({ url, fileName: row.FileName });
    },
    uploadFile() {
      this.uploadDialogVisible = true;
    },
    async onSuccess(e) {
      console.log(e);
      this.uploadForm.FileName = e.docname;
      // let params = {
      //   mid: this.merchant.MID,
      //   FileName: e.docname,
      //   FilePath: e.docurl,
      // };
      // console.log(params);
      // let response = await this.$http.post(
      //   `/api/Merchantcontract/Up/${this.merchant.Id}`,
      //   null,
      //   params
      // );
      // console.log(response);
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async (valided) => {
        if (!valided) {
          return;
        }

        let response = await this.$http.post(
          `/api/Merchantcontract/Up/${this.uploadForm.id}`,
          null,
          this.uploadForm
        );
        console.log(response);
        if (response.data.Code == 200) {
          this.$message.success("上传成功");
          this.uploadDialogVisible = false;
          this.list = response.data.Data;
          // this.reload();
        }
      });
    },
  },
};
</script>

<style></style>
